<template>
  <div>这是新闻的儿子</div>
  <button @click="getStar">点击获得天文图片</button>
  <br>
  <img v-for="(star,index) in starList" :src="star" :key="index">
  <div class="queryTest">
    <ul>
      <li>编号：{{ query.id }}</li>
      <li>标题：{{ query.title }}</li>
      <li>内容：{{ query.content }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="NewsSon">
import axios from 'axios';
import { reactive, toRefs } from 'vue';
import { useRoute } from 'vue-router';

// 变量
let starList=reactive([
  "https://apod.nasa.gov/apod/image/2508/M31Oxy_Collab_960.jpg"
])
let route=useRoute()
// 解构赋值route
let {query}=toRefs(route)


// 方法
async function getStar(){
let res=await axios.get("https://api.nasa.gov/planetary/apod?api_key=TJTjotiNFKFh541VXfSwmsKdwMBVuRUikDmyPCgN")
console.log(res.data.url);
starList.push(res.data.url)
}
</script>

<style>
img{
  height: 100px;
}
</style>